<template>
	<div class="Admain"  :style="{margin:`100px,0,100px,0`,backgroundImage:`url(${img})`}">

		<div class="header">
			<header>
				<a href="#" class="site-logo"></a>
				<div class="login">
					<span>已有美团账号</span>
					<router-link :to="{naem: 'login'}">登录</router-link>
				</div>
			</header>
		</div>




		<div class="w3ls-headding">
			<span><h1>加入我们</h1></span>
		</div>



		<div class="agile-main">
			<div class="agile-left" :style="{backgroundImage:`url(${imgii})` }">

			</div>
			<div class="agile-right">
				<el-form
						:model="registerForm"
						status-icon
						:rules="rules"
						ref="registerForm"
						label-width="80px"
						class="demo-ruleForm"
				>


					<div class="w3l-psw">
						<el-form-item label="用户名" prop="userName">
							<input type="text" v-model="registerForm.userName" autocomplete="off">
						</el-form-item>
					</div>

					<div class="clear"></div>
					<div class="w3l-psw">
						<el-form-item label="密码" prop="password">
							<input type="password" v-model="registerForm.password" autocomplete="off" @input="input">

						</el-form-item>
					</div>
					<div class="clear"></div>
					<div class="w3l-psw">
						<el-form-item label="确认密码" prop="rePassword">
							<input type="password" v-model="registerForm.rePassword" autocomplete="off">
						</el-form-item>
					</div>

					<div class="w3l-submit">

							<el-button type="primary" @click="submitForm('registerForm')">提交</el-button>

					</div>

				</el-form>
				<p class="wthree-p">  如果已经拥有账号  </p>
				<div class="wthree-social">
					<router-link tag="a" to="/Adminster" style="width:100%;"><i class="fa fa-facebook" aria-hidden="true"></i>前往登录>>></router-link>
				</div>
			</div>
		</div>

	</div>
</template>
<script>
	import api from '@/api/index.js'
	export default {
		data() {
			var validateUser = (rule, value, callback) => {
				console.log(value)
				if (value === "") {
					callback(new Error("请输入用户名"));
				} else if (value.length < 4 || value.length > 16) {
					callback(new Error("用户名必须为4-16位的字母数字下划线组成"));
				}else {
					callback();
				}
			};
			var validatePass = (rule, value, callback) => {
				if (value === "") {
					callback(new Error("请输入密码"));
				} else {
					if (this.registerForm.rePassword !== '') {
						this.$refs.registerForm.validateField('rePassword');
					}
					callback();
				}
			};
			var validatePass2 = (rule, value, callback) => {
				if (value === "") {
					callback(new Error("请再次输入密码"));
				} else if (value !== this.registerForm.password) {
					callback(new Error("两次输入密码不一致!"));
				} else {
					callback();
				}
			};
			return {
				img:require('../assets/images/bg.jpg'),
				imgii:require('../assets/images/left1.jpg'),
				registerForm: {
					userName: "",
					password: "",
					rePassword: ""
				},
				strengthClass: "",
				rules: {
					userName: [{ validator: validateUser, trigger: "blur" }],
					pass: [{ validator: validatePass, trigger: "blur" }],
					rePassword: [{ validator: validatePass2, trigger: "blur" }]
				}
			};
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						api.register({
							params: this.registerForm
						}).then((res) => {
							if (res.data.status == 'success') {
								this.$router.push({name: 'login'});
							} else {
								alert(res.data.msg);
							}
						})

					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
		}
	};
</script>
<style lang="scss" scoped>



	.el-form-item__label{
		text-align: right;
		vertical-align: middle;
		float: left;
		font-size: 12px;
		color: #606266;
		line-height: 40px;
		padding: 0 12px 0 0;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	.el-form-item {margin-bottom: 0px;
	}
	div form div input{
		margin-left: 5px;
	}
	.w3l-psw  div div input{
		border: 1px solid #DCDFE6;
	}
	.w3l-submit button {
		margin-left: calc(50% - 40px);
		display: inline-block;
		line-height: 1;
		white-space: nowrap;
		cursor: pointer;
		/*background: #FFF;*/
		/*border: 1px solid #DCDFE6;*/
		/*color: #606266;*/
		-webkit-appearance: none;
		text-align: center;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		outline: 0;

		-webkit-transition: .1s;
		transition: .1s;
		font-weight: 500;
		padding: 12px 20px;
		font-size: 14px;
		border-radius: 4px;
	}
	.Admain{

		height: 1180px;
	}
	.w3ls-headding{

	}
	.w3ls-headding span {

		color: #f5bb06;
	}
	.w3ls-headding h1 {

		padding-top: 50px;
		font-size: 50px;
		font-weight: 500;
		text-align: center;
		text-transform: capitalize;
		letter-spacing: 2px;
		color: #fff;
		margin: 45px 0px;
		font-family: 'Exo 2', sans-serif;
	}
	.agile-left {
		flex: 1;
		background: no-repeat;
		background-size: cover;
		background-position: 50% 50%;
	}
	.agile-main {
		width: 60%;
		max-width: 860px;
		margin: auto;
		display: flex;
	}
	.agile-right {
		flex: 1;
		padding: 2em;
		background: rgba(15, 16, 15, 0.89);
	}
	.agile-right-h2 h2 {
		font-size: 25px;
		font-weight: 500;
		text-align: center;
		text-transform: capitalize;
		color: #fff;
		letter-spacing: 1px;
		font-family: 'Exo 2', sans-serif;
	}
	.w3l-name, .w3l-email, .w3l-psw, .w3l-cpsw {
		font-size: 15px;
		font-weight: 500;
		text-align: left;
		text-transform: capitalize;
		width: 100%;
		margin: 15px 0px;
		//padding: 10px 0px 10px 10px;
		letter-spacing: 1px;
		box-sizing: border-box;
		border: none;
		outline: none;
		background: #fff;
		color: #1b1a1a;
		font-family: 'PT Sans', sans-serif;
	}
	.w3l-name, .w3l-email, .w3l-psw, .w3l-cpsw {
		font-size: 15px;
		font-weight: 500;
		text-align: left;
		text-transform: capitalize;
		width: 100%;
		margin: 15px 0px;
		padding: 10px 0px 15px 10px;
		letter-spacing: 1px;
		box-sizing: border-box;
		border: none;
		outline: none;
		background: #fff;
		color: #1b1a1a;
		font-family: 'PT Sans', sans-serif;
	}
	.agile-right span .fa {
		font-size: 15px;
		width: 7%;
		text-align: center;
		border-right: 1px solid #000;
		color: #d82a87;
	}
	.fa {
		display: inline-block;
		font: normal normal normal 13px/1 FontAwesome;
		font-size: inherit;
		text-rendering: auto;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.w3l-psw input[type="text"],  .w3l-psw input[type="password"] {
		-webkit-appearance: none;
		background-color: #FFF;
		background-image: none;
		border-radius: 4px;
		border: 1px solid #DCDFE6;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		color: #606266;
		display: inline-block;
		font-size: inherit;
		height: 40px;
		line-height: 40px;
		outline: 0;
		padding: 0 15px;
		-webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
		transition: border-color .2s cubic-bezier(.645,.045,.355,1);
		width: 95%;
	}
	.w3l-name, .w3l-email, .w3l-psw, .w3l-cpsw {
		font-size: 15px;
		font-weight: 500;
		text-align: left;
		text-transform: capitalize;
		width: 100%;
		margin: 15px 0px;
		padding: 10px 0px 15px 10px;
		letter-spacing: 1px;
		box-sizing: border-box;
		border: none;
		outline: none;
		background: #fff;
		color: #1b1a1a;
		font-family: 'PT Sans', sans-serif;
	}
	.w3l-agree {
		text-align: center;
	}
	.Sdas {
		font-size: 15px;
		font-weight: 500;
		text-transform: capitalize;
		padding: 8px;
		width: 60% !important;
		margin: 8px auto;
		letter-spacing: 2px;
		border: 1px solid #fff;
		border-radius: 2em;
		background: transparent;
		color: #fff;
		outline: none;
		cursor: pointer;
		display: block;
		font-family: 'PT Sans', sans-serif;
		-webkit-transition: 0.5s all;
		-moz-transition: 0.5s all;
		-o-transition: 0.5s all;
		-ms-transition: 0.5s all;
		transition: 0.5s all;
	}
	.wthree-p {
		margin-top: 20px;
		font-size: 15px;
		font-weight: 500;
		text-align: center;
		text-transform: capitalize;
		letter-spacing: 2px;
		position: relative;
		color: #fff;
		font-family: 'PT Sans', sans-serif;
	}
	.wthree-p:before {
		position: absolute;
		content: '';
		width: 65px;
		height: 2px;
		background: #d82a87;
		top: 49%;
		left: 10%;
	}
	.wthree-p:after {
		position: absolute;
		content: '';
		width: 65px;
		height: 2px;
		background: #d82a87;
		top: 49%;
		left: 74%;
	}
	.wthree-social a {
		font-size: 15px;
		font-weight: 500;
		padding: 8px 4px;
		width: 55% !important;
		margin: 18px auto;
		text-align: center;
		text-decoration: none;
		letter-spacing: 1px;
		border: none;
		border-radius: 2em;
		background: #3b5998;
		color: #fff;
		outline: none;
		cursor: pointer;
		display: block;
		font-family: 'PT Sans', sans-serif;
		-webkit-transition: 0.5s all;
		-moz-transition: 0.5s all;
		-o-transition: 0.5s all;
		-ms-transition: 0.5s all;
		transition: 0.5s all;
	}
	.w3l-agree {
		text-align: center;
	}
	.w3l-agree p {
		font-size: 15px;
		font-weight: 500;
		text-align: center;
		display: inline-block;
		text-transform: capitalize;
		letter-spacing: 1px;
		color: #fff;
		font-family: 'PT Sans', sans-serif;
	}

</style>
